<template>
    <div class="content-right">
        <Card shadow>
        	<Button type="primary" icon="plus" @click='router'>添加题目</Button>
        	<router-link :to="{name:'import-subject'}">
        		<Button>导入题目</Button>
        	</router-link>
	        <Form ref="formCustom" :model="formCustom" @keyup.enter.native="enter">
				<Row class="top">
		        	<Col :xs="4" :sm="4" :md="4" :lg="4" class="right">
				        <Input type="text" v-model="formCustom.passwd" placeholder="请输入题目ID/题干关键字"></Input>
			        </Col>
			        <Col :xs="3" :sm="3" :md="3" :lg="3" class="right">
				        <Select v-model="formItem.select" placeholder="题目题型" clearable>
			                <Option value="1">单选题</Option>
			                <Option value="2">多选题</Option>
			                <Option value="3">判断题</Option>
			            </Select>
			        </Col>
			        <Col :xs="3" :sm="3" :md="3" :lg="3" class="right">
				        <Select v-model="formItem.select2" placeholder="题目难度" clearable>
			                <Option value="1">易</Option>
			                <Option value="2">中</Option>
			                <Option value="3">难</Option>
			            </Select>
			        </Col>
			        <Col :xs="3" :sm="3" :md="3" :lg="3" class="right">
				        <Select v-model="formItem.select3" placeholder="题目状态" clearable>
			                <Option value="0">已禁用</Option>
			                <Option value="1">已启用</Option>
			            </Select>
			        </Col>
			        <Col :xs="2" :sm="2" :md="2" :lg="2" class="right">
				        <Button type="primary" @click="search">搜索</Button>
			        </Col> 
	   			</Row>
		    </Form>
		    <div class="table-box">
		        <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="selectSomething"></Table>
		        <div class="selectall">
			        <Checkbox type="checkbox" @on-change="handleSelectAll()" v-model='singel'>全选</Checkbox>
			        <Button @click="selectTigger(false)">禁用</Button>
			        <Button @click="selectTigger(true)">启用</Button>
			        <Button @click="delect">删除</Button>
			        <Button @click="exportData">导出题目</Button>
			        <Page :total="allTotal" show-elevator show-total :current='page' @on-change="changePage"></Page>
		        </div>
		        <!--<Button @click="handleSelectAll(false)">Cancel all selected</Button>-->
		    </div>
        </Card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import { router } from '@/router/index.js';
import $store from '@/store/index.js';
import util from '../../../libs/util.js'
import Vue from 'vue';

var $vue=new Vue();
export default {
    data() {
        return {
        	singel:false,
        	allTotal:0,
        	page:1,
        	cont:[],
        	Something:[],
        	object:[],
        	exportList:[],
        	columns:[],
        	mainList:{
        		mpasswd:'',
        		mselect:'',
        		mselect2:'',
        		mselect3:''
        	},
            formCustom: {
                passwd: '',
                passwdCheck: '',
                age: '',
                bu:false
            },
            formItem:{
            	select:'',
            	select2:'',
            	select3:''
            },
            columns4: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'ID',
                    key: 'Id',
                    align: 'center'
                },
                {
                    title: '题目题干',
                    key: 'question',
                    width: 200,
                    align: 'center',
                    render:function(h,params){
                    	return h('div',{},[
                    		h('Tooltip',{
                    			props:{
                    				content:params.row.question,
                    				placement:'bottom-start',
                    			},
                    			
                    		},[h('span',{},params.row.question.length<20?params.row.question:(params.row.question.substr(0,20)+'......'))])
                    	])
                    }
                },
                {
                    title: '题目类型',
                    key: 'type',
                    align: 'center',
                    render:function(h,params){
                    	return h('div',{},[
                    		h('span',{
                    			style:{
                    				fonzSize:'16px'
                    			}
                    		},
                    		params.row.type=='1'?"单选":params.row.type=='2'?"多选":"判断"
                    		)
                    	])
                    }
                },
                {
                    title: '题目难度',
                    key: 'level',
                    align: 'center',
                    render:function(h,params){
                    	return h('div',{},[
                    		h('span',{
                    			style:{
                    				fonzSize:'16px'
                    			}
                    		},
                    		params.row.level=='1'?"易":params.row.level=='2'?"中":"难"
                    		)
                    	])
                    }
                },
                {
                    title: '更新时间',
                    key: 'updateTime',
                    align: 'center',
                    width: 150,
                    render:function(h,params){
                    	return h("div",util.timestampToTime(params.row.updateTime))
                    }
                },
                {
                    title: '题目状态',
                    key: 'status',
                    align: 'center',
                    render:function(h,params){
                    	return h('i-switch',{
                    		props:{
                    			value:params.row.status==1?true:false,
                    			size:'large'
                    		},
                    		on:{
                    			'on-change':function(e){
                    				if(params.row.status==1){
                    					params.row.status=0
                    				}else{
                    					params.row.status=1
                    				}
                    				$vue.axios({
                    					method:'get',
                    					url:$store.state.app.globalUrl+'/admin/Subject/changeStatus?id='+params.row.Id+'&status='+params.row.status,
                    					data:{
                    					}
                    				}).then(function(res){
                    					if(res.data.msg=='操作成功'){
                    						$vue.$Message.success(e?'已启用':'已禁用')
                    					}else{
                    						$vue.$Message.error('操作失败')
                    					}
                    				})
                    			}
                    		}
                    	},
	                    	[
	                    		h('span',{slot:'open'},'开启'),
	                    		h('span',{slot:'close'},'关闭')
                    	])
                    }
                },
                {
                    title: '操作',
                    key: 'operation',
                    align: 'center',
                    width:180,
                    render:function(h,params){
                    	return h('div',[
                    		h('Button',{props:{
                    			type:'primary',
                    			size:'small',
                    			icon:'compose'
                    		},
                    		on:{
                    			click:function(){
                    				router.push({
                    					name:'edit-subject',
                    					query:{id:params.row.Id}
                    				})
                    			}
                    		}},'编辑'),
                    		h('Button',{props:{
                    			type:'error',
                    			size:'small',
                    			icon:'ios-trash-outline'
                    		},
                    		on:{
                    			click:function(){
                    				$vue.$Modal.confirm({
	                                    content: '<h4>确定删除？</h4>',
	                                    onOk: () => {
	                                        $vue.axios({
	                                            method:'get',
	                                            url:$store.state.app.globalUrl+"/admin/Subject/del?id="+params.row.Id,
	                                            data:{}
	                                        }).then(function(res){
	                                            $vue.$Message.success('已删除');
	                                            router.push({
	                                                name:'subject-management',
	                                                query:{time:Date.parse(new Date())}
	                                            })
	                                        });
	                                    },
	                                    onCancel: () => {
	                                        $vue.$Message.info('已取消');
	                                    }
	                                })
                    			}
                    		}
                    		},'删除')
                    	])
                    }
                }
            ],
            data1: []
        }
    },
    methods: {
        //全选
        handleSelectAll () {
    		this.$refs.selection.selectAll(this.singel);
        },
        //读取列表数据
        getlist(){
        	var that=this
        	var pageNow=that.page
        	var select=that.mainList.mselect
        	var select2=that.mainList.mselect2
        	var select3=that.mainList.mselect3
        	var passwd=that.mainList.mpasswd
        	var typeNow=(select==''||select==undefined)?"":('&type='+select)
        	var levelNow=(select2==''||select2==undefined)?"":('&level='+select2)
        	var statusNow=(select3==''||select3==undefined)?"":('&status='+select3)
        	var keywords=(passwd==''||passwd==undefined)?"":('&keywords='+passwd)
        	this.axios({
        		method:'get',
        		url:that.$store.state.app.globalUrl+'/admin/Subject/index?size=10&page='+pageNow+typeNow+levelNow+statusNow+keywords,
        		data:{}
        	}).then(function(res){
        		that.Something=[];
				that.object=[];
				that.exportList=[];
        		that.data1=res.data.data.list
        		that.allTotal=res.data.data.count
        	})
        },
        //获取选择到的ID和获取选择到的对象
        selectSomething(num){
			this.Something=[]
			if(num.length==this.data1.length){
				this.singel=true;
			}else{
				this.singel=false;
			}
        	num.forEach((item,index)=>{
        		this.Something.push(item.Id)
        	})
        	this.object=[]
        	num.forEach((item,index)=>{
        		this.object.push(item)
        	})
        	//准备导出的数组
        	var selectobj={}
        	this.exportList=[]
        	num.forEach((v,i)=>{
        		selectobj={Id:v.Id,question:v.question,type:v.type=='1'?"单选":v.type=='2'?"多选":"复选",level:v.level=='1'?"易":v.level=='2'?"中":"难",updateTime:util.timestampToTime(v.updateTime)+" min",status:v.status==0?"禁用":"启用"}
        		this.exportList.push(selectobj)
        	})
        },
        //选择到的改变状态以及解决跳转路由后还是默认选中的bug
        selectTigger(flag){
        	var that=this
        	var selectS=this.Something
        	this.axios({
        		method:'get',
        		url:that.$store.state.app.globalUrl+'/admin/Subject/changeStatus?id='+selectS.join(',')+'&status='+(flag?1:0),
        		data:{}
        	}).then(function(res){
        		if(res.data.msg=="操作成功"){
        			if(that.singel==true){
	        			that.singel=false;
	        		}
					that.$Message.success(flag?'已启用':'已禁用');
					that.getlist();
					that.Something=[];
					that.object=[];
					that.exportList=[];
				}else{
					that.$Message.error('未选择题目');
				}
        	})
        },
        //导出选中题目为Excel文件
        exportData () {
        	if(this.exportList.length==0){
        		this.$Message.error('未选择题目');
        	}else{
        		//过滤导出表格的表头
        		var columns0=this.columns4.slice(0,-1)
	        	this.columns=columns0
	        	this.columns=this.columns.slice(1);
	        	//导出
        		this.$refs.selection.exportCsv({
	                filename: '题目列表',
	                columns: this.columns,
	                data: this.exportList
	            });
	            this.exportList=[];
	            this.columns=[];
	            if(this.singel==true){
        			this.singel=false;
        		}
	            this.$router.push({
	            	name:'subject-management',
	                query:{time:Date.parse(new Date())}
	            })
        	}
            
        },
        //全选或多选删除数据
        delect(){
        	var that=this;
        	var selectS=this.Something
        	if(that.object.length==0){
        		that.$Message.error('未选择题目');
        	}else{
		        this.$Modal.confirm({
		            content: '<h4>确定删除？</h4>',
		            onOk: () => {
		                this.axios({
		                    method:'get',
		                    url:that.$store.state.app.globalUrl+"/admin/Subject/del?id="+selectS.join(','),
		                    data:{}
		                }).then(function(res){
		                	if(that.singel==true){
			        			that.singel=false;
			        		}
	                		that.$Message.success('已删除');
	                    	that.getlist();
	                    	that.Something=[];
							that.object=[];
							that.exportList=[];
		                });
		            },
		            onCancel: () => {
		                this.$Message.info('已取消');
		            }
		        })
        	}
        },
        //每次改变页面读取数据
        changePage(num){
        	if(this.singel==true){
				this.singel=false;
			}
        	this.page=num
        	this.getlist()
        },
        //搜索函数
        search(){
        	if(this.singel==true){
				this.singel=false;
			}
        	this.mainFT=true
        	this.mainList.mselect=this.formItem.select
        	this.mainList.mselect2=this.formItem.select2
        	this.mainList.mselect3=this.formItem.select3
        	this.mainList.mpasswd=this.formCustom.passwd
        	this.page=1
        	this.getlist()
        },
        //跳转链接
        router:function(){
	    	this.$router.push({
	    		name:'add-subject'
	    	})
	    },
	    //键盘
	    enter(){
	    	this.search()
	    }
    },
    //上传文件后加载数据
    mounted () {
        this.getlist()
    },
    //页面加载获取数据
    created(){
    	this.getlist()
    },
    //监听路由
    watch:{
    	"$route":"getlist"
    }
}    
</script>
<style>
.content-right .ivu-tooltip-inner{white-space:normal}
.content-right .typicode{display: inline;}
.content-right .selectall{overflow: hidden;}
.content-right .ivu-page{display: inline;float: right;}
.content-right .ivu-switch-inner span{font-size: 12px;}
.content-right .ivu-btn{margin:0 4px;}
.selectall{margin-top: 10px;padding-bottom: 4px;}
.table-box{margin-top: 20px;}
.right{margin-right: 10px;}
.top{margin-top: 12px;}
</style>